<!--
 * @Author: your name
 * @Date: 2021-09-16 15:02:11
 * @LastEditTime: 2021-09-16 16:47:57
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \Briup\JS\lunbo\index.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/lunbo.css">

</head>

<body>
    <div id="wrap">
        <ul id="pic">
            <li style="display: none;"><img src="./images/a1.jpg" alt="图片一"></li>
            <li style="display: none;"><img src="./images/a2.jpg" alt="图片二"></li>
            <li style="display: block;"><img src="./images/a3.jpg" alt="图片三"></li>
            <li style="display: none;"><img src="./images//a4.jpg" alt="图片四"></li>
            <li style="display: none;"><img src="./images/a5.jpg" alt="图片五"></li>
        </ul>

        <ul id="num">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <a href="javascript:;" class="arrow" id="left">&lt;</a>
        <a href="javascript:;" class="arrow" id="right">&gt;</a>
    </div>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script type="text/javascript">
        function $(id) {
            return document.getElementById(id);
        }
        window.onload = function() {
            var oLeft = $("left");
            var oRight = $("right");
            var index = 0;
            var timer = null;
            var pic = $("pic").getElementsByTagName("li");
            var num = $("num").getElementsByTagName("li");
            var oDiv = $("wrap");

            oRight.onclick = function() {
                index++;
                if (index >= pic.length) {
                    index = 0;
                }
                change(index);
            }
            oLeft.onclick = function() {
                index--;
                if (index < 0) {
                    index = pic.length - 1;
                }
                change(index);
            }
            oDiv.onmouseover = function() {
                clearInterval(timer);
            }
            oDiv.onmouseout = function() {
                timer = setInterval(run, 2000); //鼠标移出后重新开始定时器
            }

            timer = setInterval(run, 4000); //定时器

            function run() { //用于定时器的函数
                index++;
                if (index >= pic.length) {
                    index = 0;
                }
                change(index);
            }

            for (var i = 0; i < num.length; i++) {
                num[i].index = i; //把索引值存起来
                num[i].onmouseover = function() {
                    change(this.index);
                }
            }

            function change(curindex) { //用于切换图片的函数
                for (var i = 0; i < pic.length; i++) {
                    pic[i].style.display = "none";
                    num[i].className = "";
                }
                pic[curindex].style.display = "block";
                num[curindex].className = "active";
                index = curindex;
            }
        }
    </script> -->
    <script type="text/javascript" src="./js/lunbo.js"></script>
</body>

</html>